<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>用户管理 - angularJS</title>
	<link rel="stylesheet" href="../angular/js/lib/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/userMngWbc3.css">

	<script src="../angular/js/lib/jquery/dist/jquery.min.js"></script>
	<script src="../angular/js/lib/underscore/underscore-min.js"></script>
	<script src="../angular/js/lib/bootstrap/dist/js/bootstrap.min.js"></script>
	<script src="../angular/js/lib/angular/angular.min.js"></script>
	<script src="js/userMngWbc3.js"></script>
</head>
<body ng-app="userMng" ng-controller="userMngController">
	
	<!-- nav -->
	<div ng-include="'tmplWbc3/nav.html'"></div>

	<div class="container">
		<div class="tool-bar-wp">
			<ul class="nav nav-pills pull-left">
			  <li role="presentation" class="active"><a href="javascript:;">用户列表</a></li>
			  <li role="presentation"><a ng-click="newUser()" href="javascript:;">新增用户</a></li>
			</ul>

			<div class="search-wp pull-right mt-5">
				<div class="input-group">
			      <input ng-model="query" type="text" class="form-control" placeholder="Search for...">
			      <span class="input-group-btn">
			        <button ng-click="searchUser()" class="btn btn-default" type="button">搜索</button>
			      </span>
			    </div><!-- /input-group -->
			</div>
		</div>

		<table class="table table-striped table-bordered table-hover mt-15 mb-0">
			<tr>
				<th></th>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>电话</th>
				<th>住址</th>
				<th>学历</th>
				<th>爱好</th>
				<th>照片</th>
				<th class="action">操作</th>
			</tr>
			<tr ng-repeat="user in users">
				<td>{{$index + 1}}</td>
				<td>{{user.name}}</td>
				<td>{{user.age}}</td>
				<td>{{user.gender}}</td>
				<td>{{user.mobile}}</td>
				<td>{{user.address}}</td>
				<td>{{user.edu}}</td>
				<td>{{user.hobbies | fmtHobbies}}</td>
				<td>{{user.user_img}}</td>
				<td class="action">
					<button ng-click="updateUser()" class="btn btn-warning btn-xs">修改</button>
					<button class="btn btn-danger btn-xs" ng-click="delUser()">删除</button>
				</td>
			</tr>
		</table>

		<nav>
		  <ul class="pagination">
		  	<li>
		      <a ng-click="firstPage()" href="javascript:void(0)" aria-label="Previous">
		        <span aria-hidden="true">&laquo;</span>
		      </a>
		    </li>
		  	<li ng-class="{true: 'active'}[$index==page]" ng-click="clickPagingLi()" ng-repeat="tmpPage in pageArr"><a href="javascript:void(0)">{{tmpPage + 1}}</a></li>
		  	<li>
		      <a ng-click="lastPage()" href="javascript:void(0)" aria-label="Next">
		        <span aria-hidden="true">&raquo;</span>
		      </a>
		    </li>
		  </ul>
		</nav>
	</div>

	<!-- 新增用户对话框 -->
	<div ng-include="'tmplWbc3/dialog.html'"></div>

</body>
</html>